<template>
  <div class="judge_management">
    <div class="judge_management_header">
      <div class="judge_management_header_select">
        <JudgeSelect
          :index="judge_index"
          @selected="changeJudge"
          :options="judgeInfo"
        />
        <Select :index="3" @selected="handleSelected"></Select>
      </div>
    </div>
    <div class="judge_management_content">
      <div class="left">
        <Card name="法官信息">
          <div class="card_content judgeInfo">
            <div class="judge_photo">
              <img :src="getAssetsFile(selectName)" :alt="`${selectName}`" />
            </div>
            <div class="judge_info">
              <div class="judge_info_item">
                <span class="lab w-70">
                  姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
                </span>
                <span class="val">{{ judgeInfoData.ryxm }}</span>
              </div>
              <div class="judge_info_item">
                <span class="lab w-70">出生日期：</span>
                <span class="val">{{ judgeInfoData.csrq }}</span>
              </div>
              <div class="judge_info_item">
                <span class="lab w-70">
                  学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历：
                </span>
                <span class="val">{{ judgeInfoData.xl }}</span>
              </div>
              <div class="judge_info_item">
                <span class="lab w-70">
                  职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务：
                </span>
                <span class="val">{{ judgeInfoData.zw }}</span>
              </div>
              <div class="judge_info_item">
                <span class="lab">参加工作时间：</span>
                <span class="val">{{ judgeInfoData.cjgzsj }}</span>
              </div>
            </div>
          </div>
        </Card>
        <Card name="结案情况">
          <Echarts :full-options="caseStatusOptions" :loading="allLoading" />
        </Card>
        <Card name="诉前调解成功率">
          <Echarts
            :full-options="SecondTrialOpeningRateOptions"
            :loading="allLoading"
          />
        </Card>
      </div>
      <div class="center">
        <Card name="办案情况">
          <div class="card_content caseSituation">
            <div class="earth">
              <earthSlider />
            </div>
            <div class="case_situation_item one">
              <div class="case_situation_item_num">{{ baInfo.jal }}</div>
              <div class="case_situation_item_title">结案率</div>
            </div>
            <div class="case_situation_item second">
              <div class="case_situation_item_num">{{ baInfo.tjl }}</div>
              <div class="case_situation_item_title">调解率</div>
            </div>
            <div class="case_situation_item three">
              <div class="case_situation_item_num">
                {{ baInfo.pjjasj }} <span class="unit">天</span>
              </div>
              <div class="case_situation_item_title">平均结案时间</div>
            </div>
            <div class="case_situation_center">
              <div class="case_situation_center_item">
                <span class="name">新收</span>
                <span class="num"> {{ baInfo.las }}</span>
                <span class="series">同比：{{ baInfo.lastb }}</span>
              </div>
              <div class="case_situation_center_item">
                <span class="name">已结</span>
                <span class="num">{{ baInfo.jas }}</span>
                <span class="series">同比：{{ baInfo.jastb }}</span>
              </div>
              <div class="case_situation_center_item">
                <span class="name">未结</span>
                <span class="num">{{ baInfo.wjs }}</span>
                <span class="series">同比：{{ baInfo.wjtb }}</span>
              </div>
              <div class="case_situation_center_item">
                <span class="name">旧存</span>
                <span class="num">{{ baInfo.jcs }}</span>
                <span class="series">同比：{{ baInfo.jctb }}</span>
              </div>
            </div>
          </div>
        </Card>
        <Card name="超12月未结案件比" class="h-350">
          <div class="card_content judgeSummery">
            <div class="judge_summery_item">
              <div class="judge_summery_item_num">
                {{ c12ywjajbInfo.c12ywjajb }}
              </div>
              <div class="judge_summery_item_title">超12月未结案件比</div>
            </div>
            <div class="judge_summery_item">
              <div class="judge_summery_item_num">
                {{ c12ywjajbInfo.twelve_month }}
              </div>
              <div class="judge_summery_item_title">超12月未结案件数</div>
            </div>
            <div class="judge_summery_item">
              <div class="judge_summery_item_num">
                {{ c12ywjajbInfo.last_year }}
              </div>
              <div class="judge_summery_item_title">上年度结案数</div>
            </div>
          </div>
        </Card>
      </div>
      <div class="right">
        <Card name="结案数 / 收案数">
          <Echarts
            :full-options="ThirdTrialOpeningRateOptions"
            :loading="allLoading"
          />
        </Card>
        <Card name="近12月结案率">
          <Echarts :full-options="CaseRateOptions" :loading="allLoading" />
        </Card>
      </div>
    </div>
  </div>
</template>

<script setup name="JudgeManagement">
import { ref, reactive, onMounted, computed } from "vue";
import Select from "@/components/Select.vue";
import JudgeSelect from "@/components/JudgeSelect.vue";
import Card from "./card.vue";
import Echarts from "@/components/Echarts.vue";
import earthSlider from "@/components/earthSlider.vue";
import { options } from "./options";
import dayjs from "dayjs";
import {
  getPersionBaqh,
  getPersionC12ywjajb,
  getPersionSqtjcgl,
  getPersionJaqh,
  getPersionSjas,
  getPersionJal,
  getPersionFgxx,
} from "@/api/ryfx.js";
import { getDate } from "@/utils/index.js";
const { getYearStartDate, getYearEndDate } = getDate();

const selectName = ref("蒋超");

const searchData = computed(() => {
  return {
    ryxm: selectName.value,
    starttime: getYearStartDate(),
    endtime: getYearEndDate(),
  };
});
// 办案情况
const baInfo = ref({});
const getPersionBaqhData = async () => {
  const res = await getPersionBaqh(searchData.value);
  baInfo.value = res.data.data[0];
};

// 12月未结案件
const c12ywjajbInfo = ref({});
const getPersionC12ywjajbData = async () => {
  const res = await getPersionC12ywjajb(searchData.value);
  console.log(`output->res`, res);
  c12ywjajbInfo.value = res.data.data[0];
};

//诉前调解成功率
const SecondTrialOpeningRateOptions = reactive({ options: {}, init: false });
const queryPersionSqtjcgl = () => {
  getPersionSqtjcgl(searchData.value).then((res) => {
    SecondTrialOpeningRateOptions.options = options.SecondTrialOpeningRate(
      res.data.data[0]
    );
  });
};

//结案情况
const caseStatusOptions = reactive({ options: {}, init: false });
const getPersionJaqhData = async () => {
  const res = await getPersionJaqh(searchData.value);
  caseStatusOptions.options = options.caseStatus(res.data.data[0]);
};

//收结案比
const ThirdTrialOpeningRateOptions = reactive({ options: {}, init: false });
const getPersionSjasData = async () => {
  const res = await getPersionSjas(searchData.value);
  ThirdTrialOpeningRateOptions.options = options.ThirdTrialOpeningRate(
    res.data.data
  );
};

//近十二个月结案率
const CaseRateOptions = reactive({ options: {}, init: false });
const getPersionJalData = async () => {
  const oneYearBefore = dayjs()
    .subtract(1, "year")
    .add(1, "M")
    .format("YYYY-MM-01");
  const startMonth = dayjs(oneYearBefore).format("MM");
  const res = await getPersionJal({
    qstime: oneYearBefore,
    ryxm: selectName.value,
  });
  CaseRateOptions.options = options.CaseRate(res.data.data[0], startMonth);
};

//法官信息
const judgeInfoData = ref({});
const getJudgeInfo = async () => {
  const res = await getPersionFgxx(searchData.value);
  judgeInfoData.value = res.data.data[0];
};

const judgeInfo = [
  "吴娅",
  "耿科明",
  "王静",
  "蒋超",
  "孙扬",
  "李慧惠",
  "黄佳",
  "汪子旋",
];

const handleSelected = (val) => {
  console.log(val);
};
const judge_index = ref(3);
const changeJudge = (name, i) => {
  selectName.value = name;
  judge_index.value = i;
  getPageData();
};
const allLoading = ref(true);

const getAssetsFile = () => {
  return new URL(
    `../../assets/image/judge/${selectName.value}.jpg`,
    import.meta.url
  ).href;
};
onMounted(() => {
  getPageData();
  setTimeout(() => {
    allLoading.value = false;
  }, 1000);
});
const getPageData = () => {
  getPersionBaqhData();
  getPersionC12ywjajbData();
  queryPersionSqtjcgl();
  getPersionJaqhData();
  getPersionSjasData();
  getPersionJalData();
  getJudgeInfo();
};
</script>

<style lang="scss" scoped>
.judge_management {
  width: 100vw;
  height: 100vh;
  background: url("../../assets/image/judge/bg.png");
  background-size: 115.3% 100%;
  background-position: -157px 0;

  .judge_management_header {
    width: 100%;
    height: 88px;
    background: url("../../assets/image/posture/sp_header.png");
    background-size: cover;
  }

  .judge_management_header_select {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    padding-right: 20px;
    align-items: flex-end;
    box-sizing: border-box;
    position: relative;
    z-index: 99;
  }

  .judge_management_content {
    width: 100%;
    height: calc(100% - 110px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;

    .left,
    .right {
      width: 528px;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .center {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-top: 20px;
    }
  }

  .card_content {
    width: 100%;
    height: 100%;
    display: flex;

    &.judgeInfo {
      justify-content: space-between;
      align-items: center;

      .judge_photo {
        width: 143px;
        height: 170px;
        margin: 0 auto;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .judge_info {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 10px;
        justify-content: center;
        box-sizing: border-box;

        .judge_info_item {
          span {
            display: inline-block;
          }

          .lab {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
            width: 100px;
            line-height: 29px;
            &.w-70 {
              width: 70px;
            }
          }

          .val {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #a2e7ff;
            line-height: 29px;
            margin-left: 8px;
          }
        }
      }
    }

    &.judgeSummery {
      justify-content: space-around;
      height: 100%;
      align-items: center;
      box-sizing: border-box;
      padding: 20px 0;

      .judge_summery_item {
        width: 165px;
        height: 164px;
        display: flex;
        flex-direction: column;
        position: relative;

        &:nth-child(1) {
          background: url("../../assets/image/judge/icon_1.png") no-repeat
            center center;
          background-size: cover;
        }

        &:nth-child(2) {
          background: url("../../assets/image/judge/icon_2.png") no-repeat
            center center;
          background-size: cover;
        }

        &:nth-child(3) {
          background: url("../../assets/image/judge/icon_3.png") no-repeat
            center center;
          background-size: cover;
        }

        .judge_summery_item_title {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          position: absolute;
          width: 100%;
          text-align: center;
          line-height: 36px;
          left: 0;
          bottom: 0;
        }

        .judge_summery_item_num {
          font-family: DIN;
          font-weight: bold;
          font-size: 24px;
          color: #03a9ff;
          line-height: 44px;
          width: 100%;
          text-align: center;
          left: 0;
          bottom: 45px;
          position: absolute;
        }
      }
    }

    &.caseSituation {
      justify-content: center;
      // align-items: center;
      // background: url("../../assets/image/judge/case_center.png") no-repeat
      //   center center;
      // background-size: 456px 443px;
      box-sizing: border-box;
      position: relative;
      padding-top: 15%;
      .earth {
        position: absolute;
        left: 50%;
        top: 15%;
        transform: translateX(-50%);
      }

      .case_situation_item {
        width: 240px;
        height: 90px;
        background: url("../../assets/image/judge/situation_bg.png") no-repeat
          center center;
        background-size: cover;
        position: absolute;
        box-sizing: border-box;
        padding-left: 110px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        &.one {
          left: 10px;
          top: 30%;
        }

        &.second {
          left: 40px;
          bottom: 20%;
        }

        &.three {
          right: 40px;
          top: 50%;
        }

        .case_situation_item_title {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #ffffff;
          line-height: 20px;
        }

        .case_situation_item_num {
          font-family: DIN;
          font-weight: bold;
          font-size: 28px;
          color: #58cafd;
          line-height: 30px;

          .unit {
            font-size: 14px;
          }
        }
      }

      .case_situation_center {
        width: 200px;
        height: 200px;
        display: flex;
        flex-wrap: wrap;
        // gap: 2px;
        margin-top: 30px;
        .case_situation_center_item {
          // flex: 1;
          width: 50%;
          display: flex;
          flex-direction: column;

          span {
            display: block;
            width: 100%;
            text-align: center;
          }

          .name {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 14px;
            color: #ffffff;
            line-height: 22px;
          }

          .num {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 28px;
            color: #00ffd4;
            background: linear-gradient(0deg, #2cf4d1 0%, #22d0e5 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }

          .series {
            font-family: Microsoft YaHei;
            font-weight: bold;
            font-size: 12px;
            color: #58cafd;
            line-height: 22px;
          }
        }
      }
    }
  }

  .h-350 {
    height: 455px;
  }
}
</style>
